<template>
  <div
    class="account-item"
    :data-bill_monthly="accountItem.bill_monthly"
    @click="$emit('account-month-item', accountItem)"
  >
    <div class="account-item-top">
      <p>
        {{accountItem.bill_monthly | formatDate}}/
        <span>{{accountItem.bill_monthly | formatDate2}}</span>
      </p>
      <p
        class="item-top-right"
        :class="showRepayment(accountItem.status_str)"
      >{{accountItem.status_str}}</p>
    </div>
    <div class="account-item-bottom">
      <div class="account-bottom-title">
        <h4>币种账户</h4>
        <h4 class="title-tips">账单总额</h4>
      </div>
      <div class="account-bottom-list" v-for="(item,idx) in accountItem.amount_currency" v-show="idx<2 || show_all" :key="item.name">
        <p>{{item.name}}</p>
        <p class="account-total">{{item.amount}}</p>
      </div>
      <a href="javascript:;" v-if="accountItem.amount_currency.length>2" class="show-more text-primary" @click.self.stop="show_all = !show_all">{{show_all ? '收起' : '查看所有币种账户'}}</a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    accountItem: Object
  },
  data: function() {
    return {
      show_all:false,
    };
  },
  computed: {},
  methods: {
    accountItemClick(e) {},
    showRepayment(str) {
      return {
        repayment: str === "已还清" ? false : true
      };
    }
  },
  filters: {
    formatDate: function(value) {
      if (!value) return "";
      let ar = value.split("-");
      return ar[1];
    },
    formatDate2: function(value) {
      if (!value) return "";
      value = value.trim();
      let ar = value.split("-");
      return ar[0];
    }
  }
};
</script>

<style scoped>
.account-item {
  line-height: 1;
  width: 690px;
  margin-top: 20px;
  margin-left: 30px;
  background-color: #fff;
  border: 2px solid rgb(237, 238, 240);
  border-radius: 8px;
  /* box-shadow: 2px 2px 4px #ccc, 2px 2px 4px #ccc, 2px 2px 4px #ccc,
    2px 2px 4px #ccc, */
}
.account-item-top {
  height: 84px;
  line-height: 84px;
  border-bottom: 2px solid #ededf0;
}
.account-item-top p {
  float: left;
  margin-left: 30px;
  font-family: "Helvetica-Regular";
  font-size: 30px;
  color: rgb(211, 150, 0);
}
.account-item-top p span {
  font-family: "Helvetica-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.account-item-top .item-top-right {
  float: right;
  margin-left: 0;
  margin-right: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(211, 150, 0);
}
.item-top-right.repayment {
  color: rgb(240, 85, 33);
}

.account-item-bottom {
  padding-bottom:30px;
}
.account-bottom-title {
  height: 24px;
  margin-left: 30px;
  margin-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.account-bottom-title h4 {
  float: left;
}
.account-bottom-title .title-tips {
  float: right;
  width: 250px;
}
.account-bottom-list {
  height: 30px;
  margin-left: 30px;
  margin-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(41, 41, 41);
}
.account-bottom-list:last-child {
  margin-bottom: 30px;
}
.account-bottom-list p {
  float: left;
}
.account-bottom-list .account-total {
  float: right;
  width: 250px;
}
.show-more {
  margin-top: 20px;
  display: block;
  font-size:24px;
  text-align: center;
  padding:10px;
}
</style>
